﻿<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<script src="lib/js/evm.js" type="text/javascript" charset="utf-8"></script>
	<script src="lib/js/Evm_djyw.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/api.js" type="text/javascript" charset="utf-8"></script>
	<script src="lib/js/jquery-1.11.1.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="lib/js/key.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/public.js"></script>
	<script type="text/javascript">
		//取url参数
		function getParam(paramName) {
			paramValue = "";
			isFound = false;
			if (this.location.search.indexOf("?") == 0 && this.location.search.indexOf("=") > 1) {
				arrSource = decodeURI(this.location.search).substring(1, this.location.search.length).split("&");
				i = 0;
				while (i < arrSource.length && !isFound) {
					if (arrSource[i].indexOf("=") > 0) {
						if (arrSource[i].split("=")[0].toLowerCase() == paramName.toLowerCase()) {
							paramValue = arrSource[i].split("=")[1];
							isFound = true;
						}
					}
					i++;
				}
			}
			return paramValue;
		}
	</script>
	<style type="text/css">
		/*控制进度条等全局样式*/

		* {
			margin: 0px;
			padding: 0px;
		}

		body {
			width: 1280px;
			height: 720px;
			position: absolute;
		}

		#kuang {
			width: 1280px;
			height: 60px;
			padding-top: 20px;
			position: absolute;
			bottom: 0px;
			background: -webkit-linear-gradient(top, transparent 0%, black 100%) !important;
			transition: all 3s linear;
			-webkit-transition: all 3s linear;
		}

		#one {
			width: 980px;
			height: 5px;
			border-radius: 5px;
			border: solid 1px transparent;
			box-shadow: 0px 0px 2px transparent;
			position: relative;
			background: gainsboro;
			/*darkgrey*/
			z-index: 100;
			margin: 0 auto;
			float: left;
			margin-top: 15px;
			margin-left: 20px;
		}

		#two {
			width: 0px;
			height: 5px;
			border-radius: 5px;
			border: solid 1px transparent;
			position: relative;
			top: -1px;
			left: -1px;
			background: dodgerblue;
			z-index: 99;
		}

		#yuan {
			width: 9px;
			height: 9px;
			border-radius: 5px;
			background: dodgerblue;
			float: right;
			position: relative;
			left: 3px;
			top: -3px;
			border: solid 1px grey;
		}

		#nowtime {
			position: relative;
			float: left;
			font-size: 25px;
			margin-left: 10px;
			color: white;
		}

		#nowtime div {
			float: left;
		}

		#contenttime {
			position: relative;
			float: left;
			font-size: 25px;
			color: white;
		}

		#contenttime div {
			float: left;
		}

		#play {
			float: left;
			margin-left: 10px;
		}

		#xiegang {
			font-size: 25px;
			position: relative;
			float: left;
			color: white;
		}

		#imgs {
			position: absolute;
			bottom: 80px;
			right: 50px;
		}

		#pormpt {
			position: absolute;
			display: none;
			left: 410px;
			top: 299px;
			vertical-align: middle
		}

		.runLight {
			display: none;
		}
	</style>

	<title>视频播放详情页</title>
</head>

<body bgcolor="transparent" onLoad="init()" onUnload="exitPage();">

	<div id="pormpt" style="color: red;">
		<!--提示播放完毕-->
		<img src="images/pormpt.png" />
	</div>

	<div id="imgs">
		<img class="logo" width="55px" height="55px" src="images/pause.png" />
		<!--右下角的播放/暂停暂按钮-->
	</div>
	<div id="kuang">
		<div id="play">
			<img class="logo" width="30px" height="30px" src="images/pause.png" />
			<!--进度条的播放/暂停按钮-->
		</div>
		<div id="nowtime">
			<!--当前时间-->
			<div class="time">0</div>
			<!--当前时-->
			<div>:</div>
			<div class="time">00</div>
			<!--当前分钟数-->
			<div>:</div>
			<div class="time">00</div>
			<!--当前秒-->
		</div>
		<div id="xiegang">
			&nbsp;/&nbsp;
		</div>
		<div id="contenttime">
			<div class="time">0</div>
			<!--总时长-->
			<div>:</div>
			<div class="time">00</div>
			<!--进制总分钟-->
			<div>:</div>
			<div class="time">00</div>
			<!--进制总秒钟-->
		</div>
		<div id="one">
			<!--总长度-->
			<div id="two">
				<!--当前长度-->
				<div id="yuan"></div>
				<!--进度头-->
			</div>
		</div>

	</div>
</body>
<script type="text/javascript">
	var flag = true; //用于判断是否执行统计
	var status = 1; //判断暂停/播放状态 1是正在播放，0是暂停播放
	var id = getParam('id'); //获取视频id，用于数据统计
	// var mediaStr = getParam("mediaStr"); //获取播放地址
	var mediaStr = "http://tv.binhai.cst-info.cn:8000/public.mp4";

	// GetDatas("getArticle", {id:id}, function (err, res) {
	// 	mediaStr = res.data.video_path_tv
	// 	// mediaStr = res.data.video_path
	// 	console.log(mediaStr)
	// })


	console.info(mediaStr)
	try {
		var mp = new MediaPlayer();
	} catch (error) {
		var mp = {};
	}

	var looptime; //延时句柄
	//fun start stop用于控制进度条显示隐藏
	function fun() {
		$("#kuang").hide();
		$("#imgs").hide();
	}

	function start() {
		clearTimeout(looptime);
		looptime = setTimeout(fun, 7000);
	}

	function stop() {
		clearTimeout(looptime);
	}

	start(); //开始播放四秒后隐藏

	function grabEvent(e) {
		e = e || window.event;
		var keyCode = e.which || e.keyCode;
		switch (keyCode) {
			case 640:
			case 114:
			case keymap.iPanel.BACK:
			case keymap.DVN.BACK:
				clearInterval(loop); //释放循环资源
				window.history.go(-1);
				return false;
				break;
			case 37: //left
				clearTimeout(looptime)
				flag = true;
				$("#imgs").show();
				$("#kuang").show();
				content -= 11; //快退进度
				mp.playByTime(1, content, 0); //具体调用进度方法
				start();
				break;
			case 39: //right
				clearTimeout(looptime)
				flag = true;
				$("#imgs").show();
				$("#kuang").show();
				content += 11; //定义进度数据小于15左右和快要结束再调用playByTime会有回退的情况
				if (content > video_sec) { //快进到党建时长超过总时长时，清空clearInterval并且退出
					mp.stop(0);
				} else { //若是没有超过
					mp.playByTime(1, content, 0);
					start();
				}
				break;
			case 13:
				if (status == 1) { //判断暂停/播放状态
					stop(); //清空延时，让下面进度条和按钮持续显示
					$('.logo').attr('src', 'images/play.png'); //更改播放按钮
					flag = false //暂停进度条轮询状态
					mp.pause(); //暂停
					status = 0;
					$("#imgs").show();
					$("#kuang").show();
				} else {
					$('.logo').attr('src', 'images/pause.png');
					mp.resume(); //继续播放
					flag = true;
					status = 1;
					start();
				}
				break;
		}
	}
	document.onkeydown = grabEvent;

	function init() { //视频播放的方法
		mp.stop();
		var nativePlayerInstanceId = mp.getNativePlayerInstanceId();
		mp.setSingleMedia(mediaStr);
		mp.setVideoDisplayArea(0, 0, 1280, 720);
		mp.setVideoDisplayMode(0);
		mp.refreshVideoDisplay();
		mp.playFromStart();

	}

	function exitPage() {
		var send_time = mp.getCurrentPlayTime();
		mp.stop();
		var parems = {
			id: TV.GetParam('id'),
			duration: send_time,
			cardNo: hardware.STB.serialNumber,
			device: 'tv'
		}

		http(API_URL.loginURL + 'commons/postview', parems, function (err, res) {});


		//			window.history.go(-1);
	}

	setTimeout(function () {

		video_sec = mp.getMediaDuration(); //获取视频总秒数的方法

		var content = mp.getCurrentPlayTime(); //统计用的总秒数,获取视频当前秒数的方法

		videos = parseInt(video_sec) % 60; //播放视频的总秒数
		var videomin = (video_sec / 60) % 60; //播放视频的进制分钟数
		var videoh = ((video_sec / 60) / 60); //播放视频的进制秒数

		if (videos < 10) {
			videos = "0" + videos;
		}
		$(".time").eq(5).html(videos);

		if (videomin < 10) {
			if (videomin <= 1) {
				videomin = '00';
			} else {
				videomin = "0" + parseInt(videomin);
			}
		} else {
			videomin = parseInt(videomin)
		}
		$(".time").eq(4).html(videomin);
		$(".time").eq(3).html(parseInt(videoh));
	}, 4500)

	var onewidth = document.getElementById('one');
	widght = onewidth.offsetWidth; //获取总长进度条的长度

	var loop = setInterval(function () {

		if (flag) {
			content = mp.getCurrentPlayTime();
			s = parseInt(content); //用于转换的总秒数
			m = 0; //用于转换的总分钟数
			h = 0; //总小时数
			if (s >= 60) {
				m = parseInt(s / 60);
				min = m % 60;
			}
			sec = s % 60;
			if (m >= 60) {
				h = parseInt(m / 60);
			}
			var per = parseFloat((content / video_sec));

			var twowidth = document.getElementById('two');
			var setper = per.toFixed(4);

			var pers = widght * setper;

			twowidth.style.width = pers + "px" //动态变化进度条

			$(".time").eq(0).html(h);
			console.info($("#nowtime"))
			if (min < 10) {
				if (min < 1) {
					min = '00';
				} else {
					min = "0" + parseInt(min);
				}
			}
			$(".time").eq(1).html(min);
			if (sec < 10) {
				sec = "0" + sec;
			}
			$(".time").eq(2).html(sec);
			var loopout = setTimeout(
				function setplayend() {
					if (s + 1 > video_sec) {
						//							mp.playFromStart();

						//							mp.playByTime(1, 0, 0);//设置播放结束回到起点重新播放
						$("#imgs").show();
						$("#kuang").show();
						$("#pormpt").show();
						setTimeout(function () {
							window.history.go(-1);
						}, 5000)
					} else {
						clearTimeout(loopout)
					}
				}, 2000)
		}

	}, 1000);
</script>

<script src="js/else.js" type="text/javascript" charset="utf-8"></script>

</html>